<template>
    <div>
        <van-tabs v-model="active" animated swipeable>
            <van-tab
                :title="channel.name"
                v-for="channel in channels"
                :key="channel.id"
            >
            <!-- 列表 van-cil -->
                <ArticleList :ch1="channel"></ArticleList>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import { getUserChannels } from "@/api/channel";
import ArticleList from "@/components/article-list.vue";
export default {
    name: "home",
    data() {
        return {
            active: 0,
            channels: [],
        };
    },
    created() {
        this.loadChannels();
    },
    computed: {},
    components: {
        ArticleList,
    },
    methods: {
        async loadChannels() {
            // 调用接口
            this.channels = (await getUserChannels()).data.channels;
        },
    },
};
</script>
<style lang="less" scoped>
/deep/ .van-tabs {
    .van-tab {
        border-right: 1px solid #edeff3;
        min-width: 200px;
        height: 80px;
        .van-tab__text {
            font-size: 27px;
            color: #777777;
        }
    }

    .van-tab--active .van-tab__text {
        color: #333 !important;
    }
    .van-tabs__line {
        width: 31px !important;
        height: 6px;
        background: rgba(50, 150, 250, 1);
        border-radius: 3px;
        bottom: 8px;
    }
    .van-tabs__nav {
        padding: 0;
    }
}

/deep/ .van-tabs--line .van-tabs__wrap {
    position: fixed;
    top: 1;
    z-index: 10;
}
</style>

<style>
.van-tabs--line .van-tabs__wrap {
    width: 100vw;
}
</style>
